<div>
    <el-row style="text-align: center; margin-bottom: 10px;">
        <el-col :span="24">
            <el-tag :key="title"
                    effect="dark" @click="openWindowFile(path)" class="changeHandle">
                资源管理器打开：{{title}}
            </el-tag>
            <el-tag :key="title + separator + 'WEB-INF' + separator + 'extensions'"
                    effect="dark" @click="openWindowFile(path + separator + 'WEB-INF' + separator + 'extensions')" class="changeHandle">
                资源管理器打开：{{title}}{{separator}}WEB-INF{{separator}}extensions
            </el-tag>
            <el-tag :key="path"
                    effect="dark" @click="setCopyText(path, $event)" class="changeHandle">
                复制路径：{{path}}
            </el-tag>
        </el-col>
    </el-row>
    <el-tabs tab-position="top" style="height: 100%;" type="border-card" @tab-click="changeTab">
        <el-tab-pane lazy="true" label="list文件管理">
            <el-row>
                <el-col :span="1"></el-col>
                <el-col :span="18">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleFormNewPath" label-width="180px" class="demo-ruleForm"
                             @submit.native.prevent>
                        <el-form-item label="新增扩展包路径到列表" prop="path">
                            <el-input v-model="ruleForm.path" name="path" placeholder="具体到扩展包 或者具体到扩展包\src\web"
                                      @keyup.enter.native="addNewPath"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="1">
                    <el-button type="success" icon="el-icon-plus" circle @click="addNewPath"></el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="1"></el-col>
                <el-col :span="22">
                    <el-transfer
                            filterable
                            :filter-method="filterMethod"
                            :render-content="renderFunc"
                            filter-placeholder="输入项目名,以空格查多关键词"
                            v-model="value"
                            :titles="['当前扩展包列表', '历史操作记录']"
                            :data="data"
                            style="width: 100%">
                        </span>
                    </el-transfer>
                </el-col>
                <el-col :span="1"></el-col>
            </el-row>
            <el-row style="margin-top: 10px;">
                <el-col :span="20"></el-col>
                <el-col :span="4">
                    <el-button type="primary" plain @click="changeList">提交修改记录</el-button>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane lazy="true" label="ext管理">
            <el-row style="margin-top: 20px;">
                <el-col :span="11">
                    <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm" @submit.native.prevent>
                        <el-form-item label="上传扩展包：">
                            <el-upload
                                    accept=".ext"
                                    class="upload-demo"
                                    ref="upload"
                                    :on-success="handleSuccess"
                                    name="file"
                                    :data="{ path : path, title : title}"
                                    drag
                                    action="/simpledevelop/extension/add/extFile"
                                    :file-list="fileList"
                                    :auto-upload="true">
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="9">
                    <el-table :data="extData" style="width: 100%" border stripe>
                        <el-table-column label="扩展包" align="center" prop="shortName" min-width="15%">
                        </el-table-column>
                        <el-table-column align="center" min-width="20%" label="操作">
                            <template slot="header" slot-scope="scope">
                                操作
                                <el-button v-if="extData.length > 1" size="mini" type="primary" @click="copyExts()" alt="复制所有">
                                    复制
                                </el-button>
                            </template>
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="copyExt(scope.row.path)">
                                    复制
                                </el-button>
                                <!--                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
                                <el-popconfirm
                                        confirm-button-text='删除'
                                        cancel-button-text='取消'
                                        icon="el-icon-delete"
                                        icon-color="red"
                                        @confirm="handleDelete(scope.row.path)"
                                        :title="'确认删除' + scope.row.shortName + ' 扩展包吗？'">
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            slot="reference">
                                        删除
                                    </el-button>
                                </el-popconfirm>

                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="1"></el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane lazy="true" label="debug">
            <el-row style="margin-top: 20px;">
                <el-col :span="2">
                    {{debugStatus}}
                </el-col>
                <el-col :span="22">
                    <el-switch
                            v-model="debug"
                            active-color="#13ce66"
                            @change="changeDebug"
                            :disabled="!needOpen"
                            inactive-color="#ff4949">
                    </el-switch>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane lazy="true" label="FTP拿包">
            <el-row style="margin-left: 10px;">
                <el-checkbox-group v-model="ftp.configs">
                    <el-checkbox label="noFtpCache" name="noFtpCache">
                        禁止缓存
                    </el-checkbox>
                </el-checkbox-group>
            </el-row>
            <el-row style="margin-top: 10px;">
                <el-col :span="2">
                    <el-button type="primary" @click="searchRefExt">查询</el-button>
                </el-col>
                <el-col :span="22">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item v-for="base in ftp.baseUrl">
                            <el-input v-model="base" style="width: 120px;" disabled></el-input>
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>
                            <el-select v-model="ftp.version" style="width: 150px;">
                                <el-option v-for="version in ftp.versions" :value="version"
                                           :disabled="version != 'PD_Projects'">{{version}}
                                </el-option>
                            </el-select>
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>
                            <el-select v-model="ftp.branch" style="width: 265px;">
                                <el-option v-for="path in ftp.branches" :value="path">{{path}}</el-option>
                            </el-select>
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>
                            <el-input v-model="ftp.searchExt"></el-input>
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
            </el-row>
            <el-row v-if="!ftp.searchData || ftp.searchData.length == 0">
                <el-col :span="24">
                    <el-empty description="没有找到相关扩展包"></el-empty>
                </el-col>
            </el-row>
            <el-row v-for="i in Math.ceil(ftp.searchData.length / 2)" :key="i" style="margin-top: 10px;">
                <el-col :span="Math.floor(22 / 2)"
                        v-for="(obj,index) in ftp.searchData.slice(2 * (i - 1), 2 * (i - 1) + parseInt(2))"
                        style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);margin-right: 10px">
                    <el-descriptions title="扩展包" size="mini" :column="2" border style="padding: 10px;">
                        <template slot="extra">
                            <el-button type="primary" size="small" @click="importExt(index + ( i - 1 ) * 2)">
                                导入到当前smartbi
                            </el-button>
                        </template>
                        <el-descriptions-item>
                            <template slot="label">
                                扩展包名
                            </template>
                            {{obj.name}}.ext
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                版本
                            </template>
                            <el-select v-model="obj.select" style="width: 160px;">
                                <el-option v-for="path in obj.paths" :value="path">{{path}}</el-option>
                            </el-select>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>
            </el-row>
        </el-tab-pane>
    </el-tabs>
</div>